import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

/**
 * Notification通知组件
 * @element zss-notification
 */
@customElement('zss-notification')
export class ZssNotification extends LitElement {
  static styles = css`
    :host {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 2000;
      min-width: 330px;
      max-width: 500px;
    }

    .notification {
      background: var(--zss-bg-color);
      border-radius: var(--zss-border-radius-base);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 14px 26px 14px 13px;
      margin-bottom: 10px;
      border: 1px solid var(--zss-border-color-lighter);
      position: relative;
      transition: all 0.3s;
      opacity: 1;
      transform: translateX(0);
    }

    .notification.fade-leave-active {
      opacity: 0;
      transform: translateX(100%);
    }

    .notification__group {
      display: flex;
      align-items: flex-start;
    }

    .notification__icon {
      width: 24px;
      height: 24px;
      margin-right: 13px;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .notification__content {
      flex: 1;
    }

    .notification__title {
      font-weight: var(--zss-font-weight-primary);
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-primary);
      margin: 0 0 6px;
      line-height: 1.5;
    }

    .notification__message {
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-regular);
      margin: 0;
      line-height: 1.5;
    }

    .notification__close {
      position: absolute;
      top: 18px;
      right: 15px;
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      color: var(--zss-text-color-secondary);
      padding: 0;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .notification__close:hover {
      color: var(--zss-text-color-regular);
    }

    /* 类型样式 */
    .notification--success {
      border-color: var(--zss-color-success-light-8);
      background-color: var(--zss-color-success-light-9);
    }

    .notification--success .notification__icon {
      color: var(--zss-color-success);
    }

    .notification--warning {
      border-color: var(--zss-color-warning-light-8);
      background-color: var(--zss-color-warning-light-9);
    }

    .notification--warning .notification__icon {
      color: var(--zss-color-warning);
    }

    .notification--info {
      border-color: var(--zss-color-info-light-8);
      background-color: var(--zss-color-info-light-9);
    }

    .notification--info .notification__icon {
      color: var(--zss-color-info);
    }

    .notification--error {
      border-color: var(--zss-color-danger-light-8);
      background-color: var(--zss-color-danger-light-9);
    }

    .notification--error .notification__icon {
      color: var(--zss-color-danger);
    }

    /* 图标样式 */
    .icon-success {
      color: var(--zss-color-success);
    }

    .icon-warning {
      color: var(--zss-color-warning);
    }

    .icon-info {
      color: var(--zss-color-info);
    }

    .icon-error {
      color: var(--zss-color-danger);
    }
  `;

  /**
   * 通知标题
   * @attr title
   */
  @property({ type: String })
  title = '';

  /**
   * 通知内容
   * @attr message
   */
  @property({ type: String })
  message = '';

  /**
   * 通知类型
   * @attr type
   */
  @property({ type: String })
  type: 'success' | 'warning' | 'info' | 'error' = 'info';

  /**
   * 是否显示关闭按钮
   * @attr show-close
   */
  @property({ type: Boolean })
  showClose = true;

  /**
   * 自动关闭的延迟时间（毫秒）
   * @attr duration
   */
  @property({ type: Number })
  duration = 4500;

  /**
   * 自定义类名
   * @attr custom-class
   */
  @property({ type: String })
  customClass = '';

  @state()
  private visible = true;

  private timer: number | null = null;

  connectedCallback() {
    super.connectedCallback();
    this.startTimer();
  }

  disconnectedCallback() {
    this.clearTimer();
    super.disconnectedCallback();
  }

  private startTimer() {
    if (this.duration > 0) {
      this.timer = window.setTimeout(() => {
        this.close();
      }, this.duration);
    }
  }

  private clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }

  private handleMouseEnter() {
    this.clearTimer();
  }

  private handleMouseLeave() {
    this.startTimer();
  }

  private handleClose() {
    this.close();
  }

  private close() {
    this.visible = false;
    
    // 添加淡出动画
    setTimeout(() => {
      this.remove();
    }, 300);
  }

  private getIcon() {
    switch (this.type) {
      case 'success':
        return html`<svg class="notification__icon icon-success" viewBox="0 0 1024 1024">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"/>
        </svg>`;
      case 'warning':
        return html`<svg class="notification__icon icon-warning" viewBox="0 0 1024 1024">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"/>
        </svg>`;
      case 'error':
        return html`<svg class="notification__icon icon-error" viewBox="0 0 1024 1024">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"/>
        </svg>`;
      default:
        return html`<svg class="notification__icon icon-info" viewBox="0 0 1024 1024">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"/>
        </svg>`;
    }
  }

  render() {
    if (!this.visible) {
      return html``;
    }

    const notificationClasses = [
      'notification',
      `notification--${this.type}`,
      this.customClass
    ].filter(Boolean).join(' ');

    return html`
      <div 
        class=${notificationClasses}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        <div class="notification__group">
          ${this.getIcon()}
          <div class="notification__content">
            ${this.title ? html`
              <h4 class="notification__title">${this.title}</h4>
            ` : ''}
            <div class="notification__message">${this.message}</div>
          </div>
        </div>
        
        ${this.showClose ? html`
          <button 
            class="notification__close"
            @click=${this.handleClose}
          >
            ×
          </button>
        ` : ''}
      </div>
    `;
  }

  /**
   * 静态方法：显示通知
   */
  static show(options: {
    title?: string;
    message: string;
    type?: 'success' | 'warning' | 'info' | 'error';
    duration?: number;
    showClose?: boolean;
    customClass?: string;
  }) {
    const notification = document.createElement('zss-notification') as ZssNotification;
    
    notification.title = options.title || '';
    notification.message = options.message;
    notification.type = options.type || 'info';
    notification.duration = options.duration || 4500;
    notification.showClose = options.showClose !== false;
    notification.customClass = options.customClass || '';
    
    document.body.appendChild(notification);
    
    return notification;
  }

  /**
   * 静态方法：成功通知
   */
  static success(message: string, title?: string, duration?: number) {
    return ZssNotification.show({
      title,
      message,
      type: 'success',
      duration
    });
  }

  /**
   * 静态方法：警告通知
   */
  static warning(message: string, title?: string, duration?: number) {
    return ZssNotification.show({
      title,
      message,
      type: 'warning',
      duration
    });
  }

  /**
   * 静态方法：信息通知
   */
  static info(message: string, title?: string, duration?: number) {
    return ZssNotification.show({
      title,
      message,
      type: 'info',
      duration
    });
  }

  /**
   * 静态方法：错误通知
   */
  static error(message: string, title?: string, duration?: number) {
    return ZssNotification.show({
      title,
      message,
      type: 'error',
      duration
    });
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-notification': ZssNotification;
  }
}